import React, { useEffect, useState } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Table } from "antd";
import { receiptDetail } from "../../services";
import type { ColumnsType } from 'antd/es/table';


const OrderInWh = ({visible, onCancel, title, currentRow}: modalPropsType) => {
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    if (currentRow?.orderId) {
      receiptDetail({id: currentRow?.orderId}).then(
        res => {
          setDataSource(res || []);
        }
      )
    } else {
      setDataSource([]);
    }
  }, [currentRow?.orderId]);

  const columns: ColumnsType<any> = [
    {
      title: "件数",
      dataIndex: "pieces",
    },
    {
      title: "箱规",
      dataIndex: "length",
      render: (_: any, record: any) => <span>{`${record?.length}x${record?.width}x${record?.height}`}</span>
    },
    {
      title: "重量",
      dataIndex: "weight",
    },
    {
      title: "体积",
      dataIndex: "vol",
    },
    {
      title: "入仓仓库",
      dataIndex: "cwhName",
    },
    {
      title: "导入时间",
      dataIndex: "createTime",
    },
  ];

  return (
    <Modal
      width="700px"
      open={visible}
      title={title}
      onCancel={onCancel}
      footer={false}
    >
      <Table
        rowKey="id"
        bordered
        dataSource={dataSource}
        columns={columns}
      />
    </Modal>
  );
}
export default OrderInWh;